<template>
  <div class="container">
    <el-form
      label-width="120px"
      status-icon
      :model="invoice"
      class="grid-flex"
      ref="form"
      :rules="$rules"
    >
      <el-form-item
        :label="$language.local('ServiceProviderName')"
        prop="ServiceProviderName"
      >
        <!-- <select-name
          v-model="invoice.ServiceProviderName"
          label-key="ServiceName"
          @change="serviceChange"
        ></select-name> -->
        <span class="ml-1"> {{ invoice.ServiceProviderName }}</span>
      </el-form-item>
      <el-form-item
        :label="$language.local('MerchantName')"
        prop="MerchantName"
      >
        <!-- <select-merchant-name
          v-model="invoice.MerchantName"
          :sid="invoice.ServiceProviderId"
          @change="merchantChange"
        ></select-merchant-name> -->
        <div class="ml-1">{{ invoice.MerchantName }}</div>
      </el-form-item>
      <el-form-item :label="$language.local('SPID')">
        <select-id
          v-model="invoice.SPID"
          api-name="/api/ServiceProject/GetList"
          @change="taskIdChange"
          disabled
        >
          <template #options="{ options }">
            <el-option
              v-for="item in options"
              :key="item.ID"
              :value="item.ID"
              :label="`${item.ID} - ${item.projectName} - ￥${item.Amount}`"
            ></el-option>
          </template>
        </select-id>
      </el-form-item>
      <el-form-item
        :label="$language.local('Invoicesubject')"
        prop="Invoicesubject"
      >
        <span class="ml-1">{{ invoice.Invoicesubject }}</span>
        <!-- <select-servicetype
          :merchantId="invoice.MID"
          v-model="invoice.Invoicesubject"
        ></select-servicetype> -->
        <!-- <select-name
          v-model="invoice.Invoicesubject"
          label-key="name"
          apiName="/api/Common/GetdictionaryItem?typenum=004"
        ></select-name> -->
      </el-form-item>
      <el-form-item :label="$language.local('InvoiceType')" prop="InvoiceType">
        <el-select v-model="invoice.InvoiceType" placeholder="请选择发票类型">
          <el-option value="增值税普通发票"></el-option>
          <el-option value="增值税专用发票"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$language.local('InvoiceBlanceAmount')">
        <span class="ml-1">{{ InvoiceBlanceAmount }}</span>
      </el-form-item>
      <el-form-item
        :label="$language.local('InvoiceTaxAmount')"
        prop="InvoiceTaxAmount"
        :rules="InvoiceTaxAmountRule"
      >
        <!-- <xy-decimal
          v-model.number="invoice.InvoiceTaxAmount"
          @input="InvoiceTaxAmountInput"
        ></xy-decimal> -->
        <span class="ml-1">{{ invoice.InvoiceTaxAmount }}</span>
      </el-form-item>
      <el-form-item :label="$language.local('税率')">
        <span class="ml-1">{{ taxInvoice }}%</span>
      </el-form-item>
      <el-form-item :label="$language.local('TaxAmount')" prop="TaxAmount">
        <span class="ml-1">{{ calcTaxAmount() }}</span>
      </el-form-item>
      <el-form-item :label="$language.local('Amount')" prop="Amount">
        <span class="ml-1">{{ calcAmount() }}</span>
      </el-form-item>

      <el-form-item :label="$language.local('Remarks')" prop="Remarks">
        <xy-input v-model="invoice.Remarks"></xy-input>
      </el-form-item>
    </el-form>
    <div class="form-footer pb-2">
      <el-button type="primary" @click="onSubmit">下一步</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const validateAmount = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error("请输入正确的发票金额！"));
        return;
      }
      // let item = this.accountRecharges.find((v) => v.InvoiceAmount == value);

      // let istems = this.accountRecharges.filter((v) => v.MID === item.MID);
      // let total = istems.reduce((total, cur) => total + cur.InvoiceAmount, 0);
      if (value > this.InvoiceBlanceAmount) {
        // callback(new Error("超过可开发票金额！"));
        callback();
      } else {
        callback();
      }
    };
    return {
      invoices: [],

      invoice: {
        Id: 0,
        MID: 0,
        ServiceProviderName: "",
        MerchantName: "",
        Invoicesubject: "",
        InvoicesubjectId: "",
        unioninvoice: "",
        MerchantCode: "",
        // ApplicationTime: "2021-06-07T01:17:20.059Z",
        ServiceProviderId: 0,
        InvoiceRise: "",
        Amount: "",
        TaxAmount: "",
        InvoiceTaxAmount: "",
        InvoiceTypeId: 0,
        InvoiceType: "增值税专用发票",
        InvoiceStatus: "",
        InvoiceBusinessStatus: 0,
        Remarks: "",
        InvoiceCategory: "",
        InvoiceCode: "",
        InvoiceNumber: "",

        Rate: "",
        InvoiceFilePath: "",
        wlgs: "",
        wldh: "",
      },
      InvoiceBlanceAmount: 0,
      taxInvoice: 6,
      InvoiceTaxAmountRule: [
        { required: true, message: "请输入金额", trigger: "blur" },
        { type: "number", message: "必须为数字值" },
        { validator: validateAmount, trigger: "blur" },
      ],
    };
  },
  computed: {},
  created() {
    let data = this.$store.getters.data;
    console.log(data);
    let { accountRecharges, invoiceTotalAmount } = this.$store.getters.data;
    if (accountRecharges && accountRecharges.length > 0) {
      this.accountRecharges = accountRecharges;
      this.InvoiceBlanceAmount = invoiceTotalAmount;
      this.invoice = { ...this.invoice, ...accountRecharges[0] };
      this.invoice.ServiceProviderId = accountRecharges[0].SID;
      // this.invoice.ServiceProviderName = accountRecharges[0].ServiceName;
      this.invoice.InvoiceTaxAmount = accountRecharges[0].InvoiceAmount;
      console.log(this.invoice);
      this.invoices.push({
        invoiceTotalAmount,
      });
    } else {
      this.$router.push("apply");
    }
  },
  methods: {
    serviceChange(res) {
      this.invoice.ServiceProviderId = res.Id;
    },
    merchantChange(res) {
      this.invoice.MID = res.Id;
    },
    taskIdChange(item) {
      console.log(item);
      this.invoice.Invoicesubject = item.ServiceType;
    },
    async onSubmit() {
      let valided = await this.$refs.form.validate().catch((err) => err);
      if (!valided) {
        return;
      }
      console.log(this.invoice);
      // this.$store.commit("setData", this.invoice);
      this.$store.commit("setData", {
        accountRecharges: [this.invoice],
      });
      this.$router.push({
        name: "发票信息",
      });
      // let response = await this.$http.post("/api/invoice/Create", this.invoice);
      // console.log(response);
    },
    InvoiceTaxAmountInput(e) {
      console.log(e);
      //  this.invoice.TaxAmount = (e * 0.06).toFixed(2);
    },
    calcTaxAmount() {
      this.invoice.TaxAmount = (this.invoice.InvoiceTaxAmount * 0.06).toFixed(
        2
      );
      return this.invoice.TaxAmount;
    },
    calcAmount() {
      this.invoice.Amount = (
        this.invoice.InvoiceTaxAmount - this.invoice.TaxAmount
      ).toFixed(2);
      return this.invoice.Amount;
    },
  },
};
</script>

<style></style>
